<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="../assets/css/base.css">
  <link rel="stylesheet" href="../assets/css/xcConfirm.css">
  <link rel="stylesheet" href="../assets/css/WIFIconnect.css">
  <title>设备连接流程</title>
</head>

<body>
  <header data-step="1" class="clearfix">
    <p class="title">准备工作</p>
    <p class="resetwifi">重新设置wifi</p>
  </header>
  <!-- 步骤条 -->
  <div class="step">
    <div class="iconbar">
      <ul>
        <li class="iconwarp">
          <span class="icon iconblue">1</span>
        </li>
        <li class="linewarp">
          <span class="line blueline"></span>
        </li>
        <li class="iconwarp">
          <span class="icon">2</span>
        </li>
        <li class="linewarp">
          <span class="line"></span>
        </li>
        <li class="iconwarp">
          <span class="icon">3</span>
        </li>
        <li class="linewarp">
          <span class="line"></span>
        </li>
        <li class="iconwarp">
          <span class="icon">4</span>
        </li>
      </ul>
    </div>
  </div>
  <div class="setppage-line"></div>
  <!-- 步骤页面 -->
  <div class="setppage">
    <div class="setppage-1">
      <div>
        <div class="point">准备工作涉及的以下2点:</div>
        <ul>
          <li>A.打开检测鼠设备</li>
          <li>B.将你的移动设备(手机)连接至WIFI网络</li>
        </ul>
        <div class="wifi">
          <p>
            <img src="../assets/img/danger.png" 、> 当前未连接至WIFI
          </p>
          <p class="btn">点击连接</p>
        </div>
        <button class="btn1 nextstep">下一步</button>
      </div>
    </div>
    <div class="setppage-2">
    </div>
    <div class="setppage-3">
        <div class="refresh-box">
            <p class="refresh">
              <img src="../assets/img/refresh.png" />
            </p>
            <span>倒计时</span>
          </div>
          <div class="radar">
            <span>搜索
              <br>到的设备
              <br>
              <span id="searchnum">0</span>
            </span>
          </div>
    </div>
    <div class="setppage-4"></div>
  </div>
  <!-- 弹出层 -->
  <div class="modal">

    <!-- 链接提示 -->
    <div class="modallist popbox">
      <div class="modal-header">
        <span>“uytuyiij－201”-连接提示"</span>
        <span class="close">&times;</span>
      </div>
      <div class="modal-body">
        <p>您将为甲醛检测鼠配置wifi网络</p>
        <p>下一步，您将
          <span>wifi输入该网络的密码</span>（若无密码直 接提交即可），以使设备连接至该网络</p>
      </div>
      <div class="modal-footer">好的</div>
    </div>

<!-- 链接网络 -->
    <div class="modalnetwork popbox">
      <div class="modal-header">
        <span>以下设备以连接至“OODSO_2G2</span>
      </div>
      <div class="modal-body modelboxlist">
        <div class="modal-body-box">
          <img src="../assets/img/right.png">
          <p class="name">XANA</p>
          <p class="coding">设备编号:
            <span>A1:B2:C3:D4:E5</span>
          </p>
        </div>
        <div class="modal-body-box">
          <img src="../assets/img/right.png">
          <p class="name">XANA</p>
          <p class="coding">设备编号:
            <span>A1:B2:C3:D4:E5</span>
          </p>
        </div>
        <div class="modal-body-box">
          <img src="../assets/img/right.png">
          <p class="name">XANA</p>
          <p class="coding">设备编号:
            <span>A1:B2:C3:D4:E5</span>
          </p>
        </div>
      </div>
    </div>

<!-- 设备所有人信息 -->
    <div class="modalpossessor popbox">
      <div class="modal-header">
        <span>XANA(A1:B2:C3:D4:E5)</span>
        <span class="close">&times;</span>
      </div>
      <div class="modal-body">
        <p class="belong">设备所有人：183****0590</p>
        <p class="tip">该设备已存在所有人，您可以：</p>
        <ul>
          <li>A.联系TA解除所有人关系，您可以重新绑定</li>
          <li>B.与TA取得联系，并让TA将此设备分享于你</li>
        </ul>
        <p class="help">如何解绑？如何分享设备？</p>
      </div>
    </div>

    <!-- 绑定设备所有人 -->
    <div class="modalbinding popbox">
      <div class="modal-header">
        <span>成为设备所有人</span>
        <span class="close">&times;</span>
      </div>
      <div class="modal-body">
        <div class="box">以下手机号将成为该设备所有人</div>
        <div class="tel">
          <input type="tel" id="phoneText" placeholder="请输入手机号" />
        </div>
        <p class="errortips">请输入正确手机号码</p>
        <div class="code">
          <input type="text" id="yzmText" placeholder="请输入验证码" />
          <button class="obtain">获取</button>
        </div>
        <p class="errortips">请输入正确的验证码</p>
      </div>
      <div class="modal-footer bindphone">绑定</div>
    </div>

    <!-- 解绑与分享 -->
    <div class="modalunbundling popbox">
      <div class="modal-header">
        <span>解绑与分享</span>
        <span class="close">&times;</span>
      </div>
      <div class="modal-body">
        <ul>
          <li>A.请先下载【甲醛检测鼠】APP
            <span>点击下载</span>
          </li>
          <li>B.使用设备所有人手机号登录APP，并点击首界面的【通讯管理】</li>
          <li>C.找到目标设备，点击右上角的设置按钮，即可对设备进行解绑或者将设备分享给其他人等操作</li>
        </ul>
      </div>

    </div>
  </div>
  <script src="../assets/js/jquery-3.2.1.min.js"></script>
  <script src="../assets/js/common.js"></script>
  <script src="../assets/js/xcConfirm.js"></script>
  <script src="../assets/js/WIFIconnect.js"></script>
</body>

</html>